<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            height: 50px;
            overflow: hidden;
        }
        div>span{
            display: block;
            width: 90px;
            float: left;
            height: 30px;
            line-height: 30px;
            text-align: right;
            padding-right: 20px;
        }
        div>div{
            clear: both;
            height:20px ;
            line-height: 20px;
            padding-left: 110px;
            font-size: 15px;
            color: #666;
        }
     input{
         width: 250px;
         height: 30px;
         text-align: center;
         float: right;
         box-sizing: border-box;
         border-style: solid;
         border-color: #f0f0f0;
         outline: none;
     }

        form{
            margin: auto;
            width: 360px;
            height: 300px;
            padding: 20px;
            border: 5px solid darkred;
        }

    </style>
</head>
<body>
<form action="demo_form.asp" method="get" autocomplete="on">

    <div>
        <span>用户名</span><input type="text" class="text" placeholder="请输入用户名">
        <div></div>
    </div>
    <div>
        <span>密码</span><input type="text" class="text" placeholder="请输入密码">
        <div></div>
    </div>
    <div>
        <span>确认密码</span><input type="text" class="text" placeholder="请再次输入密码">
        <div></div>
    </div>
    <div>
        <span>手机号码</span><input type="text" class="text" placeholder="请输入手机号码">
        <div></div>
    </div>
    <input type="submit" id="sub"/>
</form>

<script>
  //所有的输入框标签
   var inputList =  document.getElementsByTagName('input');
 //提交按钮
   var sub = document.getElementById('sub');
   //正则匹配
   var reg = [/^[0-9a-zA-Z\u4e00-\u9fa5-_]{4,20}$/,/^.{6,24}$/,/^.{6,24}$/,/^1[34578]\d{9}$/];//用户名,密码,电话号码正则。
  //格式是否正确，要么为空的时候
   var flag = true;
  //为空判断
   var flag2 = false;
  //判断两次密码是否相同
  var flag3 = true;
 //用户提示
   var tishi = ['请输入用户名','请输入密码','请再次输入密码','请输入电话号码'];
  //用户提示
  var advice = ['支持中文,字母,数字,- _的组合','支持中文,字母,数字,- _的组合','支持中文,字母,数字,- _的组合','请输入电话号码'];

//循环处理输入框的焦点事件和失去焦点事件
  for(var j = 0;j<inputList.length-1;j++){
      //如果为再次输入密码输入框时,不执行。
      if(j==2){
          continue;
      }
      //绑定获得焦点事件
     (function(n){
          //输入框获得焦点事件
          inputList[n].onfocus = function(){
              //获得焦点时,如果输入的为空做的操作
              if(inputList[n].value==""||inputList[n].value==null){
                  //用户输入提示设置为空
                  inputList[n].placeholder = "";
                  //设置用户建议
                  inputList[n].nextElementSibling.innerHTML=advice[n];
              }
          }
      })(j);
      //绑定失去焦点事件
      (function(n){

          //输入框失去焦点事件
          inputList[n].onblur = function(){
              //获得输入框输入的内容
              var str = inputList[n].value;
              //判断不为空时并且格式不匹配时执行
              if(!reg[n].test(str)&&(str!=""&&str!=null)){
                  var text;
                  if(n==1){
                      text = "length需要大于等于6小于等于24"
                  }
                  problem(inputList[n].nextElementSibling,inputList[n],text);
                  //格式有问题
                  flag = false;
              }else{//格式匹配或者输入为空时执行
                  onProblem(inputList[n].nextElementSibling,inputList[n]);
                  //用户输入提示
                  inputList[n].placeholder = tishi[n];
                  //用户建议设置为空
                  inputList[n].nextElementSibling.innerHTML="";
                  //如果是再次输入密码框,进行密码判断
                 if(flag3){
                     flag = true;
                 }
              }
          }
      })(j);

  }

  //再次输入密码事件绑定
  //获得焦点事件
  inputList[2].onfocus = function(){
      //获得焦点时,如果输入的为空做的操作
      if(inputList[2].value==""||inputList[2].value==null){
          //用户输入提示设置为空
          inputList[2].placeholder = "";
          //设置用户建议
          inputList[2].nextElementSibling.innerHTML="请再次输入密码";
      }
  }
  //失去焦点事件
  inputList[2].onblur = function(){

      onProblem(inputList[2].nextElementSibling,inputList[2]);
      //用户输入提示
      inputList[2].placeholder = tishi[2];
      //用户建议设置为空
      inputList[2].nextElementSibling.innerHTML="";
          if(inputList[2].value != inputList[1].value){
              //用户建议设置为空
              inputList[2].nextElementSibling.innerHTML="两次密码输入不同";
              inputList[2].nextElementSibling.style.color = 'red';
              //格式有问题
              flag = false;
              //密码不匹配
              flag3 = false;
          }else{
              //输入没问题
              flag = true;
              //密码相同
              flag3 = true;
          }
  }

  //提交按钮点击事件
   sub.onclick = function(){
       //格式没问题或输入为空时
      if(flag){
       for(var i =0;i<inputList.length-1;i++){
       if(inputList[i].value == ""||inputList[i].value == null){
           inputList[i].focus();//获得焦点
           //设置有问题的操作
           problem(inputList[i].nextElementSibling,inputList[i],tishi[i]);
           //输入为空
           flag2 = false;
           //停止循环
           break;
       }else{
           //输入不为空
           flag2 = true;
           //设置没问题时的操作
           onProblem(inputList[i].nextElementSibling,inputList[i])
       }
       }
      }
       return flag2;
   }

sdfjdslfjds

//有问题处理
  function problem(div,edt,text){
      //是否有传递参数
      if(!text){
          text = "你的格式有问题！";
      }
      div.innerHTML=text;
      div.style.color = "red";
      edt.style.borderColor = "red";
  }

  
  
  
  function fun(){
  console.log("Hello World!");
  }

</script>

</body>
</html>